<template>
	<div class="shop-info">
		<div class="shop-title">
			<img :src="shop.logo" alt="">
			<span>{{shop.name}}</span>
		</div>
		<div class="shop-content">
			<div class="left">
				<div>
					<span>总销量</span>
					<span>{{shop.cSells}}</span>
				</div>
				<div>
					<span>货物</span>
					<span>{{shop.cGoods}}</span>
				</div>
			</div>
			<div class="right">
				<div v-for="item in shop.score">
					<span>{{item.name}}</span>
					<span>{{item.score}}</span>
					<span v-if="item.isBetter" class="high">高</span>
					<span v-else class="low">低</span>
				</div>
			</div>
		</div>
		<div class="go-shop"><a :href="shop.shopUrl">进店逛逛</a></div>
	</div>
</template>

<script>
	export default {
		name:'ShopInfo',
		props:{
			shop:{}
		}
	}
</script>

<style scoped>
	.shop-info {
		font-size: 16px;
		padding: 0.533333rem 0.266666rem;
	}
	.shop-title {
		display: flex;
		align-items: center;
	}
	.shop-title img {
		display: inline-block;
		width: 0.64rem;
		height: 24px;
		border: 1px solid #ccc;
		border-radius: 100%;
		padding: 3px;
	}
	.shop-title span {
		padding-left: 10px;
		font-size: 18px;
	}
	.shop-content {
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 20px 0;
	}
	.left,.right{
		display: flex;
		justify-content: space-around;
		align-items: center;
		flex: 1;
	}
	.left{
		border-right: .5px solid #ccc;
	}
	.right {
		flex-direction: column;
	}
	.left>div{
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
	.left>div span{
		padding-top: 6px;
	}
	.right>div,.go-shop{
		display: flex;
		justify-content: space-between;
		width: 100%;
		padding: 4px 0;
	}
	.right>div span {
		padding-left: 5px;
	}
	.go-shop a{
		display: inline-block;
		text-align: center;
		width: 35%;
		margin: 0 auto;
		padding: 0.213333rem 0.533333rem;
		background: #ccc;
		border-radius: 12px;
	}
	.high {
		color: red;
	}
	.low {
		color: greenyellow;
	}
</style>
